<template>
    <div class="screen-wrapper">
        <div class="title">
            <div style="position:absolute; left:3%; top:5%; "><Clock /></div>
            <span class="shadow title-text">智慧巡检综合看板</span> 
            <div style="position:absolute; right:3%; top:6%;"><GDWeather /></div>
        </div>
        <div class="content">
            <InfoItem :data="dayData" />  
            <InfoItem :data="monthData" />    
            <InfoItem :data="yearData" />    
  
            <!-- 本月巡检情况 -->
            <div class="card">
                <div class="card-title"><span class="shadow">本月巡检情况</span></div>
                <div class="card-content">
                    <BarChart :fontSize="global.fontSize" />
                </div>
            </div>
            <div class="card">
                <div class="card-title"><span class="shadow">本月巡检类型分析</span></div>
                <div class="card-content">
                    <MultiPieChart />
                </div>
            </div>
            <div class="card">
                <div class="card-title">本月任务准时率</div>
                <div class="card-content">
                    <ExpandPieChart :fontSize="global.fontSize" />
                </div>
            </div>
            <div class="card">
                <div class="card-title"><span class="shadow">区域缺陷分布</span></div>
                <div class="card-content" style="padding:var(--mPadding) 0;">
                    <RankBarChart />
                </div>
            </div>
            <div class="card">
                <div class="card-title"><span class="shadow">高频缺陷分析</span></div>
                <div class="card-content">
                    <WordCloud />
                </div>
            </div>
            <div class="card">
                <div class="card-title"><span class="shadow">本月缺陷处理情况</span></div>
                <div class="card-content">
                    <PieChart />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { watch, ref, onMounted } from 'vue';
    import { getYearAndMonthCount } from '@/api/board.js';
    import { useGlobalStore } from '@/stores/global';
    import dayIcon from '@/assets/monitor/day.png';
    import monthIcon from '@/assets/monitor/month.png'
    import yearIcon from '@/assets/monitor/year.png'
    import BarChart from './components/BarChart.vue';
    import MultiPieChart from './components/MultiPieChart.vue';
    import RankBarChart from './components/RankBarChart.vue';
    import PieChart from './components/PieChart.vue';
    import WordCloud from './components/WordCloud.2.vue';
    import ExpandPieChart from './components/ExpandPieChart.vue';
    import { formatDateTime } from '@/utils/date';
    import Clock from '@/components/Clock.vue';
    import InfoItem from './components/InfoItem.vue';
    import GDWeather from '@/components/GDWeather.vue';
    import moment from 'moment';
    const global = useGlobalStore();
    const dayData = ref({ text:'今日', icon:dayIcon, finished:0, unfinished:0, fix:0 });
    const monthData = ref({ text:'本月', icon:monthIcon, finished:0, unfinished:0, fix:0 });
    const yearData = ref({ text:'本年', icon:yearIcon, finished:0, unfinished:0, fix:0 });
    const fetchPeriodData = (params, type)=>{
        getYearAndMonthCount(params)
        .then(res=>{
            if ( res.data.code === 200 ){
                let { finishedCount, notFinishedCount, rectifyCount, totalCount } = res.data.data;
                if( type === 'day') {
                    dayData.value = { ...dayData.value, finished:finishedCount, unfinished:notFinishedCount, fix:rectifyCount, sum:totalCount };
                } else if ( type === 'month') {
                    monthData.value = { ...monthData.value, finished:finishedCount, unfinished:notFinishedCount, fix:rectifyCount, sum:totalCount };
                } else if ( type === 'year') {
                    yearData.value = { ...yearData.value, finished:finishedCount, unfinished:notFinishedCount, fix:rectifyCount, sum:totalCount };
                }
            }
        })
    }
    onMounted(()=>{
        let date1 = moment(new Date());
        // console.log(temp);
        let date2 = moment(new Date());
        let date3 = moment(new Date());

        fetchPeriodData({ startTime:date1.startOf('day').format('YYYY-MM-DD') + ' 00:00:00', endTime:date1.endOf('day').format('YYYY-MM-DD') + ' 23:59:59' }, 'day')
        fetchPeriodData({ startTime:date2.startOf('month').format('YYYY-MM-DD') + ' 00:00:00', endTime:date2.endOf('month').format('YYYY-MM-DD') + ' 23:59:59' }, 'month')
        fetchPeriodData({ startTime:date3.startOf('year').format('YYYY-MM-DD') + ' 00:00:00', endTime:date3.endOf('year').format('YYYY-MM-DD') + ' 23:59:59' }, 'year')

    })
</script>

<style lang="scss" scoped>
    .screen-wrapper {
        height:100%;
        background:#000;
        background-size:100% 100%;
        background-image:url(@/assets/monitor/bg.png);
        font-size:var(--baseFontSize);
        position:relative;
        .title {
            height:10%;
            display:flex;
            justify-content: center;
            align-items: center;
           
            color:#fff;
            .shadow {
                text-shadow: 0px 0px 12px #3ae8ff;
            }
            .title-text {
                font-size:var(--36FontSize);
                font-weight:bold;
                letter-spacing: 0.4vw;
                font-style:italic;
            }
        }
        .content {
            height:82%;
            width:95%;
            margin:0 auto;
            padding-top:var(--mPadding);
            display:flex;
            flex-wrap:wrap;
            align-items:flex-start;
            gap:var(--mPadding);
            .card, .flex-wrapper {
                width:calc( calc(100% - 2 * var(--mPadding)) / 3 );
            }
            .card {
                height:40%;
                .card-title {
                    height:12%;
                    text-align:center;
                    background:rgba(26, 227, 254, 0.2);
                    font-size:var(--18FontSize);
                    color:#fff;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    position:relative;
                    .shadow {
                        text-shadow: 0px 0px 12px #3ae8ff;
                    }
                   
                }
                .card-title::after {
                    content:'';
                    position:absolute;
                    width:100%;
                    height:1px;
                    bottom:0;
                    left:0;
                    background-image:linear-gradient(to Right, rgba(34, 221, 246, 0.05) 0% , rgba(34, 221, 246, 0.65) 50%, rgba(34, 221, 246, 0.05) 100% );
                }
                .card-content {
                    height:88%;
                    background-image:linear-gradient(to bottom, rgba(26, 227, 254, 0.05), rgba(26, 227, 254, 0.15))
                }
            }
            .flex-wrapper {
                display:flex;
                height:20%;
                padding:0 var(--mPadding);
                align-items: center;
                justify-content: space-around;
                background-image:linear-gradient(to bottom, rgba(26, 227, 254, 0.05), rgba(26, 227, 254, 0.15));
                position:relative;
                font-size:var(--baseFontSize);
                .flex-item {
                    display:flex;
                    align-items: center;
                    color:#fff;
                    position:relative;
                    .flex-icon {
                        width:1.8vw;
                        margin-right:var(--sPadding);
                    }
                    .flex-content {
                       
                    }
                    .value {
                        font-size:var(--24FontSize);
                        font-weight:bold;
                        line-height:var(--32FontSize);
                    }
                }
                
            }
            .flex-wrapper::before {
                content:'';
                position:absolute;
                width:100%;
                height:2px;
                top:0;
                left:0;
                background-image:linear-gradient(to Right, rgba(34, 221, 246, 0.05) 0% , rgba(34, 221, 246, 0.65) 50%, rgba(34, 221, 246, 0.05) 100% );
            }
            .flex-wrapper::after {
                content:'';
                position:absolute;
                width:100%;
                height:2px;
                bottom:0;
                left:0;
                background-image:linear-gradient(to Right, rgba(34, 221, 246, 0.05) 0% , rgba(34, 221, 246, 0.65) 50%, rgba(34, 221, 246, 0.05) 100% );
            }
        }
    }
</style>